<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SimpleOne - A Responsive Html5 Ecommerce Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crete+Round' rel='stylesheet' type='text/css'><link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/flexslider.css" type="text/css" media="screen" rel="stylesheet"  />
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/cloud-zoom.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- fav -->
<link rel="shortcut icon" href="assets/ico/favicon.html">
</head>
<body>
<!-- Header Start -->
<header>
  <div class="headerstrip">
    <div class="container">
      <div class="row">
        <div class="span12">
          <a href="index-2.html" class="logo pull-left"><img src="img/logo.png" alt="SimpleOne" title="SimpleOne"></a>
          <!-- Top Nav Start -->
          <div class="pull-left">
            <div class="navbar" id="topnav">
              <div class="navbar-inner">
                <ul class="nav" >
                  <li><a class="home active" href="#">Home</a>
                  </li>
                  <li><a class="myaccount" href="#">My Account</a>
                  </li>
                  <li><a class="shoppingcart" href="#">Shopping Cart</a>
                  </li>
                  <li><a class="checkout" href="#">CheckOut</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- Top Nav End -->
          <div class="pull-right">
            <form class="form-search top-search">
              <input type="text" class="input-medium search-query" placeholder="Search Here…">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="headerdetails">
      <div class="pull-left">
        <ul class="nav language pull-left">
          <li class="dropdown hover">
            <a href="#" class="dropdown-toggle" data-toggle="">US Doller <b class="caret"></b></a>
            <ul class="dropdown-menu currency">
              <li><a href="#">US Doller</a>
              </li>
              <li><a href="#">Euro </a>
              </li>
              <li><a href="#">British Pound</a>
              </li>
            </ul>
          </li>
          <li class="dropdown hover">
            <a href="#" class="dropdown-toggle" data-toggle="">English <b class="caret"></b></a>
            <ul class="dropdown-menu language">
              <li><a href="#">English</a>
              </li>
              <li><a href="#">Spanish</a>
              </li>
              <li><a href="#">German</a>
              </li>
            </ul>
          </li>
        </ul>
        
      </div>
      <div class="pull-right">
        <ul class="nav topcart pull-left">
          <li class="dropdown hover carticon ">
            <a href="#" class="dropdown-toggle" > Shopping Cart <span class="label label-orange font14">1 item(s)</span> - $589.50 <b class="caret"></b></a>
            <ul class="dropdown-menu topcartopen ">
              <li>
                <table>
                  <tbody>
                    <tr>
                      <td class="image"><a href="product.html"><img width="50" height="50" src="img/prodcut-40x40.jpg" alt="product" title="product"></a></td>
                      <td class="name"><a href="product.html">MacBook</a></td>
                      <td class="quantity">x&nbsp;1</td>
                      <td class="total">$589.50</td>
                      <td class="remove"><i class="icon-remove"></i></td>
                    </tr>
                    <tr>
                      <td class="image"><a href="product.html"><img width="50" height="50" src="img/prodcut-40x40.jpg" alt="product" title="product"></a></td>
                      <td class="name"><a href="product.html">MacBook</a></td>
                      <td class="quantity">x&nbsp;1</td>
                      <td class="total">$589.50</td>
                      <td class="remove"><i class="icon-remove "></i></td>
                    </tr>
                  </tbody>
                </table>
                <table>
                  <tbody>
                    <tr>
                      <td class="textright"><b>Sub-Total:</b></td>
                      <td class="textright">$500.00</td>
                    </tr>
                    <tr>
                      <td class="textright"><b>Eco Tax (-2.00):</b></td>
                      <td class="textright">$2.00</td>
                    </tr>
                    <tr>
                      <td class="textright"><b>VAT (17.5%):</b></td>
                      <td class="textright">$87.50</td>
                    </tr>
                    <tr>
                      <td class="textright"><b>Total:</b></td>
                      <td class="textright">$589.50</td>
                    </tr>
                  </tbody>
                </table>
                <div class="well pull-right buttonwrap">
                  <a class="btn btn-orange" href="#">View Cart</a>
                  <a class="btn btn-orange" href="#">Checkout</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div id="categorymenu">
      <nav class="subnav">
        <ul class="nav-pills categorymenu">
          <li><a class="active"  href="index-2.html">Home</a>
            <div>
              <ul>
                <li><a href="index2.html">Home Style 2</a>
                </li>
                <li><a href="index3.html">Home Style 3</a>
                </li>
                <li><a href="index4.html">Home Style 4</a>
                </li>
                <li><a href="index5.html">Home Style 5</a>
                </li>
                <li><a href="index6.html">Home Style 6</a>
                </li>
                <li><a href="index-2.html">Home Style 1</a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="product.html">Products</a>
            <div>
              <ul>
                <li><a href="product.html">Product style 1</a>
                </li>
                <li><a href="product2.html">Product style 2</a>
                </li>
                <li><a href="#"> Women's Accessories</a>
                </li>
                <li><a href="#">Men's Accessories <span class="label label-success">Sale</span>
                  </a>
                </li>
                <li><a href="#">Dresses </a>
                </li>
                <li><a href="#">Shoes <span class="label label-warning">(25)</span>
                  </a>
                </li>
                <li><a href="#">Bags <span class="label label-info">(new)</span>
                  </a>
                </li>
                <li><a href="#">Sunglasses </a>
                </li>
              </ul>
              <ul>
                <li><img src="img/proudctbanner.jpg" alt="" title="">
                </li>
              </ul>
            </div>
          </li>
          <li><a  href="category.html">Categories</a>
          </li>
          <li><a href="shopping-cart.html">Shopping Cart</a>
          </li>
          <li><a href="checkout.html">Checkout</a>
          </li>
          <li><a href="compare.html">Compare</a>
          </li>          
          <li><a href="blog.html">Blog</a>
            <div>
              <ul>
                <li><a href="blog.html">Blog page</a>
                </li>
                <li><a href="bloglist.html">Blog List VIew</a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="myaccount.html">My Account</a>
            <div>
              <ul>
                <li><a href="myaccount.html">My Account</a>
                </li>
                <li><a href="login.html">Login</a>
                </li>
                <li><a href="register.html">Register</a>
                </li>
                <li><a href="wishlist.html">Wishlist</a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="features.html">Features</a>
          </li>
          <li><a href="contact.html">Contact</a>
          </li>         
        </ul>
      </nav>
    </div>
  </div>
</header>
<!-- Header End -->

<div id="maincontainer">
  <section id="product">
    <div class="container">
     <!--  breadcrumb --> 
      <ul class="breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="divider">/</span>
        </li>
        <li class="active">features</li>
      </ul>     
   
      <!-- features-->      
      <h1 class="heading1"><span class="maintext">Typography</span><span class="subtext">See Our Typography, List Items, Tables, Icons</span></h1>
      <!-- Typo--> 
      <section id="typography">      
      <!-- Headings & Paragraph Copy -->      
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <br>
      <h1><span>h1. Heading 1</span></h1>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <h2 class="heading2">h2. Heading 2</h2>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <h3>h3. Heading 3</h3>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <h4>h4. Heading 4</h4>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <h5>h5. Heading 5</h5>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <h6>h6. Heading 6</h6>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
      <strong></strong>
      <br>
      <br>
      
      <section id="buttons">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Button</th>
            <th>class=""</th>
            <th class="description">Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a href="#" class="btn">Default</a></td>
            <td><code>btn</code></td>
            <td class="description">Standard gray button with gradient</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-primary">Primary</a></td>
            <td><code>btn btn-primary</code></td>
            <td class="description">Provides extra visual weight and identifies the primary action in a set of buttons</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-info">Info</a></td>
            <td><code>btn btn-success</code></td>
            <td class="description">Used as an alternative to the default styles</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-success">Success</a></td>
            <td><code>btn btn-success</code></td>
            <td class="description">Indicates a successful or positive action</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-warning">Warning</a></td>
            <td><code>btn btn-warning</code></td>
            <td class="description">Indicates caution should be taken with this action</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-danger">Danger</a></td>
            <td><code>btn btn-danger</code></td>
            <td class="description">Indicates a dangerous or potentially negative action</td>
          </tr>
          <tr>
            <td><a href="#" class="btn btn-inverse">Inverse</a></td>
            <td><code>btn btn-inverse</code></td>
            <td class="description">Alternate dark gray button, not tied to a semantic action or use</td>
          </tr>
        </tbody>
      </table>
      <br>
      <br>
    </section>
    <section class="messages">
      <h1 class="heading1"><span class="maintext">Messages</span></h1>
      <div class="infomsg alert">
        <a class="clostalert">close</a>
        <strong>Information!</strong> Lorem Ipsum is simply dummy </div>
      <div class="successmsg alert">
        <a class="clostalert">close</a>
        <strong>Sucess!</strong> Lorem Ipsum is simply dummy </div>
      <div class="errormsg alert">
        <a class="clostalert">close</a>
        <strong>Error!</strong> Lorem Ipsum is simply dummy </div>
      <div class="alertmsg alert">
        <a class="clostalert">close</a>
        <strong>Alert!</strong> Lorem Ipsum is simply dummy </div>
      <div class="infomsg2 alert">
        <a class="clostalert">close</a>
        <strong>Information!</strong> Lorem Ipsum is simply dummy </div>
    </section>
    <section>
      <div class="row">
        <div class="span6">
          <h1 class="heading1"><span class="maintext">Inline labels</span></h1>
          <table class="table table-bordered table-striped inlinelables">
            <thead>
              <tr>
                <th>Labels</th>
                <th>Markup</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="label">Default</span></td>
                <td><code>[label]Default[/label]</code></td>
              </tr>
              <tr>
                <td><span class="label label-success">Success</span></td>
                <td><code>[label style="label-success"]Success[/label]</code></td>
              </tr>
              <tr>
                <td><span class="label label-warning">Warning</span></td>
                <td><code>[label style="label-warning"]Warning[/label]</code></td>
              </tr>
              <tr>
                <td><span class="label label-important">Important</span></td>
                <td><code>[label style="label-important"]Important[/label]</code></td>
              </tr>
              <tr>
                <td><span class="label label-info">Info</span></td>
                <td><code>[label style="label-info"]Info[/label]</code></td>
              </tr>
              <tr>
                <td><span class="label label-inverse">Inverse</span></td>
                <td><code>[label style="label-inverse"]Inverse[/label]</code></td>
              </tr>
            </tbody>
          </table>
          <p></p>
        </div>
        <div class="span6">
          <h1 class="heading1"><span class="maintext">Badges</span></h1>
          <table class="table table-bordered table-striped badges">
            <thead>
              <tr>
                <th>Name</th>
                <th>Example</th>
                <th>Markup</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> Default </td>
                <td><span class="badge">1</span></td>
                <td><code>[badge]1[/badge]</code></td>
              </tr>
              <tr>
                <td> Success </td>
                <td><span class="badge badge-success">2</span></td>
                <td><code>[badge style="badge-success"]2[/badge]</code></td>
              </tr>
              <tr>
                <td> Warning </td>
                <td><span class="badge badge-warning">4</span></td>
                <td><code>[badge style="badge-warning"]4[/badge]</code></td>
              </tr>
              <tr>
                <td> Error </td>
                <td><span class="badge badge-error">6</span></td>
                <td><code>[badge style="badge-error"]6[/badge]</code></td>
              </tr>
              <tr>
                <td> Info </td>
                <td><span class="badge badge-info">8</span></td>
                <td><code>[badge style="badge-info"]8[/badge]</code></td>
              </tr>
              <tr>
                <td> Inverse </td>
                <td><span class="badge badge-inverse">10</span></td>
                <td><code>[badge style="badge-inverse"]10[/badge]</code></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
      <!-- Blockquotes -->
      <h1 class="heading1"><span class="maintext">Blockquotes</span></h1>
      <div class="row">
        <div class="span4">
          <p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
          <p>Include an optional <code>&lt;small&gt;</code> element to cite your source and you'll get an em dash <code>&amp;mdash;</code> before it for styling purposes.</p>
        </div>
        <div class="span8">
          <div class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;blockquote&gt;</span></li>
              <li class="L1"><span class="pln">
                </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</span><span class="tag">&lt;/p&gt;</span></li>
              <li class="L2"><span class="pln">
                </span><span class="tag">&lt;small&gt;</span><span class="pln">Someone famous</span><span class="tag">&lt;/small&gt;</span></li>
              <li class="L3"><span class="tag">&lt;/blockquote&gt;</span></li>
            </ol>
          </div>
        </div>
      </div>
      <!--/row-->
      <br>
      <br>
      <h2 class="heading2">Example blockquotes</h2>
      <div class="row">
        <div class="span6">
          <p>Default blockquotes are styled as such:</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
            <small>Someone famous in <cite title="">Body of work</cite></small>
          </blockquote>
        </div>
        <div class="span6">
          <p>To float your blockquote to the right, add <code>class="pull-right"</code>:</p>
          <blockquote class="pull-right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
            <small>Someone famous in <cite title="">Body of work</cite></small>
          </blockquote>
        </div>
      </div>
      
      <!-- Lists -->
      <h1 class="heading1"><span class="maintext">Lists</span></h1>
      <div class="row">
        <div class="span4">
          <h2 class="heading2">Unordered</h2>
          <p><code>&lt;ul&gt;</code></p>
          <ul class="listoption1">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="span4">
          <h2 class="heading2">Unstyled</h2>
          <p><code>&lt;ul class="unstyled"&gt;</code></p>
          <ul class="unstyled listoption2">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="span4">
          <h2 class="heading2">Ordered</h2>
          <p><code>&lt;ol&gt;</code></p>
          <ol class="listoption3">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ol>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="span4">
          <h2 class="heading2">Unordered</h2>
          <p><code>&lt;ul&gt;</code></p>
          <ul class="listoption4">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="span4">
          <h2 class="heading2">Unstyled</h2>
          <p><code>&lt;ul class="unstyled"&gt;</code></p>
          <ul class="unstyled listoption5">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
        <div class="span4">
          <h2 class="heading2">Ordered</h2>
          <p><code>&lt;ol&gt;</code></p>
          <ul class="listoption36">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
      </div>
      
      <!-- /row -->
      <br>
      <br>
    </section>
     <!-- Tabels--> 
    <section id="tables">
      <div class="page-header">
        <h1 class="heading1"><span class="maintext">Tables</span></h1>
      </div>
      <h3>1. Default table styles</h3>
      <div class="row">
        <div class="span4">
          <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
          <div class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;table</span><span class="pln">
                </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table"</span><span class="tag">&gt;</span></li>
              <li class="L1"><span class="pln"> …</span></li>
              <li class="L2"><span class="tag">&lt;/table&gt;</span></li>
            </ol>
          </div>
        </div>
        <div class="span8">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <br>
      <h3>2. Striped table</h3>
      <div class="row">
        <div class="span4">
          <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
          <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
          <div style="margin-bottom: 18px;" class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;table</span><span class="pln">
                </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-striped"</span><span class="tag">&gt;</span></li>
              <li class="L1"><span class="pln"> …</span></li>
              <li class="L2"><span class="tag">&lt;/table&gt;</span></li>
            </ol>
          </div>
        </div>
        <div class="span8">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <br>
      <h3>3. Bordered table</h3>
      <div class="row">
        <div class="span4">
          <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
          <div class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;table</span><span class="pln">
                </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-bordered"</span><span class="tag">&gt;</span></li>
              <li class="L1"><span class="pln"> …</span></li>
              <li class="L2"><span class="tag">&lt;/table&gt;</span></li>
            </ol>
          </div>
        </div>
        <div class="span8">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="2">1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>Mark</td>
                <td>Otto</td>
                <td>@TwBootstrap</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <br>
      <h3>4. Condensed table</h3>
      <div class="row">
        <div class="span4">
          <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
          <div style="margin-bottom: 18px;" class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;table</span><span class="pln">
                </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-condensed"</span><span class="tag">&gt;</span></li>
              <li class="L1"><span class="pln"> …</span></li>
              <li class="L2"><span class="tag">&lt;/table&gt;</span></li>
            </ol>
          </div>
        </div>
        <div class="span8">
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <br>
      <h3>5. Combine them all!</h3>
      <div class="row">
        <div class="span4">
          <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
          <div style="margin-bottom: 18px;" class="prettyprint linenums">
            <ol class="linenums">
              <li class="L0"><span class="tag">&lt;table</span><span class="pln">
                </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-striped table-bordered table-condensed"</span><span class="tag">&gt;</span></li>
              <li class="L1"><span class="pln"> ...</span></li>
              <li class="L2"><span class="tag">&lt;/table&gt;</span></li>
            </ol>
          </div>
        </div>
        <div class="span8">
          <table class="table table-striped table-bordered table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
     <!-- Icons--> 
    <section id="icons">     
        <div class="page-header">
          <h1>Icons <small>by <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>
            </small></h1>
        </div>
        <h2 class="heading2">Icon glyphs</h2>
        <p>140 icons in sprite form, available in dark gray (default) and white, provided by <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>
          .</p>
        <ul class="the-icons clearfix">
          <li><i class="icon-glass"></i> icon-glass</li>
          <li><i class="icon-music"></i> icon-music</li>
          <li><i class="icon-search"></i> icon-search</li>
          <li><i class="icon-envelope"></i> icon-envelope</li>
          <li><i class="icon-heart"></i> icon-heart</li>
          <li><i class="icon-star"></i> icon-star</li>
          <li><i class="icon-star-empty"></i> icon-star-empty</li>
          <li><i class="icon-user"></i> icon-user</li>
          <li><i class="icon-film"></i> icon-film</li>
          <li><i class="icon-th-large"></i> icon-th-large</li>
          <li><i class="icon-th"></i> icon-th</li>
          <li><i class="icon-th-list"></i> icon-th-list</li>
          <li><i class="icon-ok"></i> icon-ok</li>
          <li><i class="icon-remove"></i> icon-remove</li>
          <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
          <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
          <li><i class="icon-off"></i> icon-off</li>
          <li><i class="icon-signal"></i> icon-signal</li>
          <li><i class="icon-cog"></i> icon-cog</li>
          <li><i class="icon-trash"></i> icon-trash</li>
          <li><i class="icon-home"></i> icon-home</li>
          <li><i class="icon-file"></i> icon-file</li>
          <li><i class="icon-time"></i> icon-time</li>
          <li><i class="icon-road"></i> icon-road</li>
          <li><i class="icon-download-alt"></i> icon-download-alt</li>
          <li><i class="icon-download"></i> icon-download</li>
          <li><i class="icon-upload"></i> icon-upload</li>
          <li><i class="icon-inbox"></i> icon-inbox</li>
          <li><i class="icon-play-circle"></i> icon-play-circle</li>
          <li><i class="icon-repeat"></i> icon-repeat</li>
          <li><i class="icon-refresh"></i> icon-refresh</li>
          <li><i class="icon-list-alt"></i> icon-list-alt</li>
          <li><i class="icon-lock"></i> icon-lock</li>
          <li><i class="icon-flag"></i> icon-flag</li>
          <li><i class="icon-headphones"></i> icon-headphones</li>
          <li><i class="icon-volume-off"></i> icon-volume-off</li>
          <li><i class="icon-volume-down"></i> icon-volume-down</li>
          <li><i class="icon-volume-up"></i> icon-volume-up</li>
          <li><i class="icon-qrcode"></i> icon-qrcode</li>
          <li><i class="icon-barcode"></i> icon-barcode</li>
          <li><i class="icon-tag"></i> icon-tag</li>
          <li><i class="icon-tags"></i> icon-tags</li>
          <li><i class="icon-book"></i> icon-book</li>
          <li><i class="icon-bookmark"></i> icon-bookmark</li>
          <li><i class="icon-print"></i> icon-print</li>
          <li><i class="icon-camera"></i> icon-camera</li>
          <li><i class="icon-font"></i> icon-font</li>
          <li><i class="icon-bold"></i> icon-bold</li>
          <li><i class="icon-italic"></i> icon-italic</li>
          <li><i class="icon-text-height"></i> icon-text-height</li>
          <li><i class="icon-text-width"></i> icon-text-width</li>
          <li><i class="icon-align-left"></i> icon-align-left</li>
          <li><i class="icon-align-center"></i> icon-align-center</li>
          <li><i class="icon-align-right"></i> icon-align-right</li>
          <li><i class="icon-align-justify"></i> icon-align-justify</li>
          <li><i class="icon-list"></i> icon-list</li>
          <li><i class="icon-indent-left"></i> icon-indent-left</li>
          <li><i class="icon-indent-right"></i> icon-indent-right</li>
          <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
          <li><i class="icon-picture"></i> icon-picture</li>
          <li><i class="icon-pencil"></i> icon-pencil</li>
          <li><i class="icon-map-marker"></i> icon-map-marker</li>
          <li><i class="icon-adjust"></i> icon-adjust</li>
          <li><i class="icon-tint"></i> icon-tint</li>
          <li><i class="icon-edit"></i> icon-edit</li>
          <li><i class="icon-share"></i> icon-share</li>
          <li><i class="icon-check"></i> icon-check</li>
          <li><i class="icon-move"></i> icon-move</li>
          <li><i class="icon-step-backward"></i> icon-step-backward</li>
          <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
          <li><i class="icon-backward"></i> icon-backward</li>
          <li><i class="icon-play"></i> icon-play</li>
          <li><i class="icon-pause"></i> icon-pause</li>
          <li><i class="icon-stop"></i> icon-stop</li>
          <li><i class="icon-forward"></i> icon-forward</li>
          <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
          <li><i class="icon-step-forward"></i> icon-step-forward</li>
          <li><i class="icon-eject"></i> icon-eject</li>
          <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
          <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
          <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
          <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
          <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
          <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
          <li><i class="icon-question-sign"></i> icon-question-sign</li>
          <li><i class="icon-info-sign"></i> icon-info-sign</li>
          <li><i class="icon-screenshot"></i> icon-screenshot</li>
          <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
          <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
          <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
          <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
          <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
          <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
          <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
          <li><i class="icon-share-alt"></i> icon-share-alt</li>
          <li><i class="icon-resize-full"></i> icon-resize-full</li>
          <li><i class="icon-resize-small"></i> icon-resize-small</li>
          <li><i class="icon-plus"></i> icon-plus</li>
          <li><i class="icon-minus"></i> icon-minus</li>
          <li><i class="icon-asterisk"></i> icon-asterisk</li>
          <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
          <li><i class="icon-gift"></i> icon-gift</li>
          <li><i class="icon-leaf"></i> icon-leaf</li>
          <li><i class="icon-fire"></i> icon-fire</li>
          <li><i class="icon-eye-open"></i> icon-eye-open</li>
          <li><i class="icon-eye-close"></i> icon-eye-close</li>
          <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
          <li><i class="icon-plane"></i> icon-plane</li>
          <li><i class="icon-calendar"></i> icon-calendar</li>
          <li><i class="icon-random"></i> icon-random</li>
          <li><i class="icon-comment"></i> icon-comment</li>
          <li><i class="icon-magnet"></i> icon-magnet</li>
          <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
          <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
          <li><i class="icon-retweet"></i> icon-retweet</li>
          <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
          <li><i class="icon-folder-close"></i> icon-folder-close</li>
          <li><i class="icon-folder-open"></i> icon-folder-open</li>
          <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
          <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
          <li><i class="icon-hdd"></i> icon-hdd</li>
          <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
          <li><i class="icon-bell"></i> icon-bell</li>
          <li><i class="icon-certificate"></i> icon-certificate</li>
          <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
          <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
          <li><i class="icon-hand-right"></i> icon-hand-right</li>
          <li><i class="icon-hand-left"></i> icon-hand-left</li>
          <li><i class="icon-hand-up"></i> icon-hand-up</li>
          <li><i class="icon-hand-down"></i> icon-hand-down</li>
          <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
          <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
          <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
          <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
          <li><i class="icon-globe"></i> icon-globe</li>
          <li><i class="icon-wrench"></i> icon-wrench</li>
          <li><i class="icon-tasks"></i> icon-tasks</li>
          <li><i class="icon-filter"></i> icon-filter</li>
          <li><i class="icon-briefcase"></i> icon-briefcase</li>
          <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
        </ul>
        <h3>Glyphicons attribution</h3>
        <p><a href="http://glyphicons.com/">Glyphicons</a>
          Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a>
          whenever practical.</p>
      </section>  
    </div>
  </section>
</div>

<!-- Footer -->
<footer id="footer">
  <section class="footersocial">
    <div class="container">
      <div class="row">
        <div class="span3 aboutus">
          <h2 class="heading2">About Us </h2>
          <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br>
            <br>
            t has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
        </div>
        <div class="span3 contact">
          <h2 class="heading2">Contact Us </h2>
          <ul>
            <li class="phone"> +123 456 7890, +123 456 7890</li>
            <li class="mobile"> +123 456 7890, +123 456 78900</li>
            <li class="email"> test@test.com</li>
            <li class="email"> test@test.com</li>
          </ul>
        </div>
        <div class="span3 twitter">
          <h2 class="heading2">Twitter </h2>
          <div id="twitter">
          </div>
        </div>
        <div class="span3 facebook">
          <h2 class="heading2">Facebook </h2>
          <div id="fb-root"></div>
          <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
          <script type="text/javascript">FB.init("");</script>
          <script type="text/javascript">
//<![CDATA[
document.write('<fb:fan profile_id="80655071208" stream="0"	connections="6"	logobar="0" height="190px"	width="200"css="css/fb.css"></fb:fan> ');
//]]>
</script>
        </div>
      </div>
    </div>
  </section>
  <section class="footerlinks">
    <div class="container">
      <div class="info">
        <ul>
          <li><a href="#">Privacy Policy</a>
          </li>
          <li><a href="#">Terms &amp; Conditions</a>
          </li>
          <li><a href="#">Affiliates</a>
          </li>
          <li><a href="#">Newsletter</a>
          </li>
        </ul>
      </div>
      <div id="footersocial">
        <a href="#" title="Facebook" class="facebook">Facebook</a>
        <a href="#" title="Twitter" class="twitter">Twitter</a>
        <a href="#" title="Linkedin" class="linkedin">Linkedin</a>
        <a href="#" title="rss" class="rss">rss</a>
        <a href="#" title="Googleplus" class="googleplus">Googleplus</a>
        <a href="#" title="Skype" class="skype">Skype</a>
        <a href="#" title="Flickr" class="flickr">Flickr</a>
      </div>
    </div>
  </section>
  <section class="copyrightbottom">
    <div class="container">
      <div class="row">
        <div class="span6"> All images are copyright to their owners. </div>
        <div class="span6 textright"> ShopSimple @ 2012 </div>
      </div>
    </div>
  </section>
  <a id="gotop" href="#">Back to top</a>
</footer>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/application.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script defer src="js/jquery.fancybox.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script  src="js/cloud-zoom.1.0.2.js"></script>
<script  type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript"  src="js/jquery.carouFredSel-6.1.0-packed.js"></script>
<script type="text/javascript"  src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript"  src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript"  src="js/jquery.ba-throttle-debounce.min.js"></script>
<script defer src="js/custom.js"></script>
</body>
</html>